<script setup>
import {onMounted, ref} from "vue";
import Http from "@/http/http.js";
import {getImgUrl} from "@/until/tool.js";

const typeName = ref(null)
const typeData = ref([])
const typeId = ref(0)
const listData = ref([])
const oneData = ref({})
onMounted(() => {
  getServiceData()
})
const getServiceData = async () => {
  typeData.value = []
  const res = await Http.professionType()
  res['Data'].map(value => {
    if (value.ParentId === 1) {
      if (typeData.value.length === 5) {
        return
      }
      typeData.value.push(value)
    }
  })
  if (typeId.value === 0) {
    typeName.value = typeData.value[0].TypeName;
    typeId.value = typeData.value[0].TypeId;
  }
  await getListData()
}

const setTypeName = (data) => {
  typeName.value = data.TypeName;
  typeId.value = data.TypeId;
  getListData()
}

const getListData = async () => {
  const rbs = await Http.professionList({TypeId: typeId.value})
  listData.value = []
  rbs['Data'].forEach((d, index) => {
    if (index === 0) {
      oneData.value = {
        ProfessionImg: d.ProfessionImg,
        ProfessionTitle: d.ProfessionTitle,
        ProfessionDes: d.ProfessionDes
      }
    }
    if (index > 0 && index < 7) {
      listData.value.push({
        ProfessionImg: d.ProfessionImg,
        ProfessionTitle: d.ProfessionTitle,
      })
    }
  })
}


</script>

<template>
  <div class="induBox wid">
    <h2 class="title text-align-center">—— 行业检测 ——</h2>
    <div class="tab font-20px wow animate__fadeInUp animate__animated" data-wow-delay="0s" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-delay: 0s;">
      <ul>
        <li v-for="item of typeData" @click="setTypeName(item)" :class="typeName===item.TypeName?'cur':''">
          <div class="txt">{{ item.TypeName }}</div>
        </li>
        <li>
          <a href="/check">更多 >> </a>
        </li>
      </ul>
    </div>
    <div class="listW fontsize-20px">
      <div class="listL">
        <ul>
          <li><a class="pic" href="/check"><img :src="getImgUrl(oneData.ProfessionImg)" :alt="oneData.ProfessionTitle"></a>
            <div class="txtb">
              <div class="name"><a href="/check"> {{ oneData.ProfessionTitle }} </a></div>
              <div class="intro font16">{{ oneData.ProfessionDes }}···
              </div>
            </div>
          </li>

        </ul>
      </div>
      <div class="listR">
        <ul>

          <li v-for="item of listData">
            <a class="pic" href="/check">
              <img :src="getImgUrl(item.ProfessionImg)" :alt="item.ProfessionTitle"> </a>
            <div class="name"><a href="/check"> {{ item.ProfessionTitle }} </a></div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.induBox { padding: 4.4em 0 5.7em;}

.induBox .tab ul { margin-top: 2.4em; font-weight: bold;
  display:                     flex; flex-wrap: wrap; justify-content: center; align-items: center;}

.induBox .tab li { cursor: pointer; padding: 0.8em 0 0.7em; position: relative; z-index: 0; color: #1f2c5c; text-align: center;
  background-color:        #f7f7f7; width: 16.66%;}

.induBox .tab li.cur { background-color: #1f2c5c; color: #fff;}

.induBox .listW { margin-top: 4.3em; display: flex; justify-content: space-between; align-items: flex-start;}

.induBox .listL { width: 38%;}

.induBox .listL {}

.induBox .listL ul {}

.induBox .listL .pic { display: block; cursor: pointer; position: relative; z-index: 0;
  padding-top:                  61.7%; overflow: hidden;}

.induBox .listL .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit:                        cover;
  transition:                        all 0.5s;
  -webkit-transition:                all 0.5s;}

.induBox .listL .pic:hover img {
  -ms-transform:     scale(1.03, 1.03);
  -webkit-transform: scale(1.03, 1.03);
  transform:         scale(1.03, 1.03);
  }

.induBox .listL .txtb { padding: 1em; text-align: left;}

.induBox .listL .name { font-family: "思源宋体 CN";}

.induBox .listL .intro { color: #686868; line-height: 1.9em;
  height:                       9.5em;
  overflow:                     hidden;
  text-overflow:                ellipsis;
  display:                      -webkit-box;
  -webkit-box-orient:           vertical;
  -webkit-line-clamp:           5; margin-top: 0.3em;}

.induBox .listR { width: 60.8%;}

.induBox .listR ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}

.induBox .listR li { width: 31.9%; margin-bottom: 3.1%; margin-right: 2.15%; background-color: #f7f7f7;}

.induBox .listR li:nth-child(3n) { margin-right: 0;}

.induBox .listR .pic {display: block; cursor: pointer; position: relative; z-index: 0;
  padding-top:                 70.8%; overflow: hidden;}

.induBox .listR .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit:                        cover;
  transition:                        all 0.5s;
  -webkit-transition:                all 0.5s;}

.induBox .listR .pic:hover img {
  -ms-transform:     scale(1.03, 1.03);
  -webkit-transform: scale(1.03, 1.03);
  transform:         scale(1.03, 1.03);
  }

.induBox .listW a { color: #1f2c5c;}

.induBox .listR .name { height: 3.9em;
  display:                      flex; justify-content: center; align-items: center;
  overflow:                     hidden; padding: 0 0.5em;font-family: "思源宋体 CN";}

.induBox .conD {display: none;}

.induBox .conD:first-child {display: block;}
</style>
